.classify-display {
  margin-top: 1rem;
  .tag-overflow-box {
    position: relative;
    width: 100%;
    height: 3rem;
    overflow: hidden;
    border-radius: 3.75px;
    .tag-box {
      position: absolute;
      top: 0;
      left: 0;
      flex-wrap: nowrap;
      user-select: none;
      .tag {
        text-transform: capitalize;
        text-align: center;
        box-sizing: border-box;
        min-width: 4rem;
        flex-shrink: 0;
        padding: 0 1rem;
        line-height: 3rem;
        // text-align: center;
        cursor: pointer;
        color: white;
        background-color: black;
      }

      .router-link-exact-active {
        background-color: transparent;
        color: black;
        box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.75) inset;
      }
    }
  }


  .article-box-container {
    .mini-article {
      margin-top: 1rem;
      margin-right: 5%;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
}

@media(max-width: 1024px) {
  .classify-display {
    .article-box-container  {
      .mini-article {
        width: 47.5%;
        &:nth-of-type(3n) {
          margin-right: 5%;
        }
        &:nth-of-type(2n) {
          margin-right: 0;
        }
      }
    }
  }
}

@media(max-width: 780px) {
  .classify-display {
    .article-box-container  {
      .mini-article {
        width: 100%;
        margin-right: 0;
        &:nth-of-type(3n) {
          margin-right: 0px;
        }
      }
    }
  }
}

@media(max-width: 578px) {
  .classify-display {
    .tag-overflow-box {
      overflow-x: scroll;

    }
    .tag-overflow-box::-webkit-scrollbar {
      height: 1px;
    }
  }
}